<template>
    <div class="front-padding pNone meterUnit">
        <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane label="计量单位组" name="first">
                <v-menu/>
                <div class="table bj">
                    <el-scrollbar style="height: 100%;">
                        <v-table1 v-if="activeName === 'first'"/>
                    </el-scrollbar>
                </div>
            </el-tab-pane>
            <el-tab-pane label="计量单位" name="second">
                <v-menu/>
                <div class="table bj">
                    <el-scrollbar style="height: 100%;">
                        <v-table2 v-if="activeName === 'second'"/>
                    </el-scrollbar>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import Menu from './menu'
import Table1 from './table1'
import Table2 from './table2'
export default {
    components: {
        'v-menu': Menu,
        'v-table1': Table1,
        'v-table2': Table2,
    },
    data() {
        return {
            activeName: 'first'
        }
    },
    watch: {
        activeName(newVal) {
            this.$store.commit('meterUnitStore/updateTabStatus', newVal === 'first' ? 1 : 2);
        }
    }
}
</script>

